<#include "${ftl_skin}/common/header.ftl">

<style type="text/css">
	#menu-tree{
		height: 500px;
		border-bottom: 1px solid silver;
		margin-top:-10px;
		overflow: auto;
		margin-bottom: 5px;
	}
	.li-node{
		position: relative;
		border: 1px white solid;
	}
	.li-checkbox{
		clear: both;
		margin-bottom: -3px;
		float: right;
	}
	
	.li-checkbox span{
		cursor: pointer;
		margin-right: 3px;
	}
	
	.li-checkbox span:hover{
		background: silver;
	}
	
	.li-checkbox:after {
		clear: both;
	}
	
    .isChange{
    	border-bottom: 1px solid silver;
    }
	
</style>
</head>
<body class="white-bg">

<div class="row">
   	<div class="panel">
   		<div class="panel-body">	
   			<input type="hidden" id="menu-type" value="${menu!}"/>
			<ul id="menu-tree" class="ztree">
					
			</ul>
			<div class="col-xs-4 ">
				<button  class="btn btn-sm btn-primary " type="button" onclick="javascript:savaData();">保存</button> 
				<button class="btn btn-sm btn-white" type="button" onclick="javascript:closeDialog('');return false;">退出</button>
			</div>
   		</div>
	 </div>
</div>

<script type="text/html" id="node-tpl">
	<div class="li-checkbox">
		<span id="auth-{{id}}" class='li-auth {{isAuth=='1'?'selected':''}}' data-info="{{tId}}" onclick="toAuth('{{tId}}','{{treeId}}')"> 
			<i class="glyphicon glyphicon-check auth-1 s-ok" style="font-family: 'Glyphicons Halflings';display: none;"></i>
			<i class="glyphicon glyphicon-unchecked auth-0 s-no" style="font-family: 'Glyphicons Halflings';display: none;"></i>
			<span>允许&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
		</span> 
		<span id="dis-{{id}}" class='li-disabled {{isDis=='1'?'selected':''}}' data-info="{{tId}}" onclick="toDis('{{tId}}','{{treeId}}')"> 
			 <i class="glyphicon glyphicon-check dis-1 s-ok" style="font-family: 'Glyphicons Halflings';display: none;"></i>
			 <i class="glyphicon glyphicon-unchecked dis-0 s-no" style="font-family: 'Glyphicons Halflings';display: none;"></i>
			 <span>禁用&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 	
		</span>
	<div>
</script>

<#include "${ftl_skin}/common/js.ftl">
<link rel="stylesheet" href="${path.commonPath! }tools/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="${path.commonPath! }tools/zTree_v3/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="${path.commonPath! }tools/zTree_v3/js/jquery.ztree.exedit-3.5.js"></script>
<script type="text/javascript" src="${path.commonPath! }tools/zTree_v3/js/jquery.ztree.excheck-3.5.min.js" ></script>
<script type="text/javascript" src="${path.commonPath! }tools/artTemplate/template.js" ></script>
<script type="text/javascript">
	var setting = {
		view: {
			/* showLine: false,
			showIcon: false,
			selectedMulti: false, */
			//dblClickExpand: false,
			addDiyDom: addDiyDom,
			expandSpeed: "fast"
		},
		check: {
			enable: false,
			chkStyle : "checkbox",
			chkboxType: { "Y": "ps", "N": "ps" }
		},
		data: {
			key:{
				name:"node_name",
				title:"node_name",
				checked: "isChecked"
			},
			simpleData: {
				enable: true,idKey: "tree_code",pIdKey: "parent_tree_code",rootPId: '-1'
			}
		}
	};
	
	var treeObj = null;
	
	function addDiyDom(treeId, treeNode) {
		//console.log("id:"+treeNode.id+"\t"+treeNode.tId);
		var data= { 
				id:treeNode.id , tId:treeNode.tId, treeId:treeId ,
				isAuth:("1"==treeNode.is_auth),
				isDis:("1"==treeNode.is_disabled)
			};
		var html = template('node-tpl', data);
		//console.log(html)
		$("#"+data.tId).addClass("li-node");
		$("#"+data.tId).data("info",{id:treeNode.id,tid:treeNode.tId});
		$("#"+data.tId).children('a').after(html);
		$("#"+data.tId).find(".auth-"+treeNode.is_auth).show();
		$("#"+data.tId).find(".dis-"+treeNode.is_disabled).show();
	}
	
	function checkSub(node,ischeck,el,type){
		if( node.isParent ){
			$.each(node.children,function( index,obj ) {
				$(el+obj.id).find("i").hide();
				if(ischeck){
					$(el+obj.id).find(".s-ok").show();
					$(el+obj.id).addClass("selected");
				}else{
					$(el+obj.id).find(".s-no").show();
					$(el+obj.id).removeClass("selected");
				}
				if(type==0){
					obj.is_auth = ischeck?1:0;
				}
				if(type==1){
					obj.is_disabled = ischeck?1:0;
				}
				doChange(el+obj.id);
				checkSub(obj,ischeck,el)
			});
		}
	}
	
	function checkParent(node,ischeck,el,type){
		var parent = node.getParentNode();
		if( parent != null  ){
			var isSelected =$(el+parent.id).hasClass('selected')
			if(ischeck){
				if( !isSelected ){
					$(el+parent.id).addClass('selected')
				}
				$(el+parent.id).find("i").hide();
				$(el+parent.id).find(".s-ok").show();
				if(type==0){
					parent.is_auth = 1;
				}
				if(type==1){
					parent.is_disabled = 1;
				}
			}else{
				var s_sub = parent.children;
				console.log(parent.tId);
				var s_selected = $("#"+parent.tId).find("ul").find(".selected");
				console.log(s_selected.length);
				if( s_selected.length == 0){
					if(type==0){
						parent.is_auth = 0;
					}
					if(type==1){
						parent.is_disabled = 0;
					}
					$(el+parent.id).removeClass('selected')
					$(el+parent.id).find("i").hide();
					$(el+parent.id).find(".s-no").show();
				}
			}
			
			$(el+parent.id).addClass("isChange");
			
			checkParent(parent,ischeck,el);
		}
	}
	
	function doChange(el){
		var isChange = $(el).hasClass('isChange');
		if(!isChange){
			$(el).addClass('isChange');
		}else{
			$(el).removeClass('isChange');
		}
	}
	
	function setCheck(el){
		var ischeck = $(el).hasClass('selected');
		
		$(el).find("i").hide();
		if(!ischeck){
			$(el).find(".s-ok").show();
			$(el).addClass('selected');
		}else{
			$(el).find(".s-no").show();
			$(el).removeClass('selected');
		}
		doChange(el);
	}
	
	function toAuth(tid,treeID){
		var node = treeObj.getNodeByTId(tid);
		var el = $("#auth-"+node.id);
		var ischeck = $(el).hasClass('selected');
		setCheck(el);
//		checkSub(node,!ischeck,"#auth-",0);
//		checkParent(node,!ischeck,"#auth-",0);
	}
	
	function toDis(tid){
		var node = treeObj.getNodeByTId(tid);
		var el = $("#dis-"+node.id);
		var ischeck = $(el).hasClass('selected');
		setCheck(el);
//		checkSub(node,!ischeck,"#dis-",1);
//		checkParent(node,!ischeck,"#dis-",1);
	}
	
	function init_tree($el,treeType){
		$.ajax({
			type:"post",
			sync:false,
			url:"${path.servicePath}auth/tree.do",
			data:{ objCode:"${objCode!}", objType:"${objType!}", treeType:treeType },
			success:function(rs){
				$("#"+$el).html(null);
				if(rs.state==0){
					//alert(typeof rs.result);
					treeObj = $.fn.zTree.init($("#"+$el),setting,rs.result );
					treeObj.expandAll(true);
				}else{
					$("#"+$el).html("加载数据失败！")
				}
			}
			
			
		});
	}
	
	//=========================================================================================
		
	/**
	*保存数据
	*/
	function savaData(){
		var news = new Array();
		var edits = new Array();
		$.each($(".isChange"),function(index,obj){
			var node = treeObj.getNodeByTId($(this).data("info"));
			var isAuth = $("#auth-"+node.id).hasClass("selected") ? 1:0;
			var isDis = $("#dis-"+node.id).hasClass("selected") ? 1:0;
			if( node.is_edit == '0' ){
				news.push({obj_code:"${objCode}",obj_type:"${objType}",tree_type:"${menu}",node_seq:node.id,is_auth:isAuth,is_disabled:isDis});
				node.is_edit = 1;
			}else{
				edits.push({id:node.is_edit,is_auth:isAuth,is_disabled:isDis});
			}
		});
		
		$.ajax({
			type:"post",
			sync:false,
			url:"${path.servicePath}auth/save.do",
			contentType:"application/json",
			data:JSON.stringify({ news:news , edits:edits }),
			success:function(rs){
				HFToastrTipResult(rs);
				if(rs.state==0){
					closeDialog('reload');
				}
			}
			
			
		});
		
	}
	
	
	$(function(){
		init_tree("menu-tree",$("#menu-type").val());
	});
</script>

<#include "${ftl_skin}/common/footer.ftl">